import { useRef, useState } from 'react';
import './App.css';
// import MyUseEffect from './components/effect/MyUseEffect';
// import MyUseLayoutEffect from './components/layoutEffect/MyUseLayoutEffect'
// import MyCurrentHooks from './components/crrentHooks/MyCurrentHooks';
// import MyUseDebugValue from "./components/useDebugValue/MyUseDebugValue"

import MyUseImperativeHandle from "./components/useImperativeHandle/MyUseImperativeHandle"
function App() {
  const [flag, setFlag] = useState(true)
  const inputEl = useRef()
  return (
    <div className="App">
      {/* <button type='button' onClick={() => {
        setFlag(!flag)
      }}>show or hide</button>
      {flag ? <MyUseEffect /> : null} */}

      {/* <MyUseLayoutEffect /> */}

      {/* <MyCurrentHooks />
      <MyUseDebugValue /> */}

      <>
        {/* 1. 要传入 ref */}
        <MyUseImperativeHandle ref={inputEl} flag={flag}></MyUseImperativeHandle>
        <button onClick={() => {
          console.log(inputEl.current.value);
          inputEl.current.focus()
        }}>获取子组件暴露的数据</button>
      </>
    </div>
  );
}

export default App;
